<script setup>
import { ref } from 'vue'
import { computed } from 'vue'
import {watch} from 'vue'
const list=ref([{id:1,name:"1"},{id:2,name:"2"},{id:3,name:"3"}])
const temp=ref('')
const temp2=ref('')
const Add=()=>{
  list.value.pop()
}
const newlist= computed(()=>{
  //返回list长度加一
  return list.value.length+1
})
</script>

<template>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in list" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </tbody>
</table>    
<input type="text" v-model="temp" placeholder="ID">
<input type="text" v-model="temp2" placeholder="Name">
<button @click="Add">加入</button>
<p>{{newlist}}</p>

</template>